<template>
  <div class="login">
    <div class="inner">
      <p>登录账号</p>
      <p>虾米 - 严选商城欢迎您</p>

      <my-input
        :class="userTrue"
        v-model="username"
        placeholder="请输入用户名"
        @blur="userBlur"
        type="text"
      >
        <!-- @blur在这里是一个自定义事件 -->
        <!-- 跟vue2相比 v-model变成了modelValue和update:modelValue事件的合写 -->
        <template #text>
          <span v-show="userTrue == 'error'">必填</span>
        </template>
        <template #icon>
          <van-icon name="phone-o" />
        </template>
      </my-input>
      <!-- 手机号码输入框 -->
      <!-- 失去焦点的时候判断输入的是不是正确 并且给这个输入框绿色或者红色的边框 -->

      <my-input
        :class="passTrue"
        v-model="password"
        placeholder="请输入密码"
        @blur="passBlur"
        :type="isPassOpen ? 'text' : 'password'"
      >
        <template #text>
          <span v-show="passTrue == 'error'">必填</span>
        </template>
        <template #icon>
          <van-icon
            :name="isPassOpen ? 'eye-o' : 'closed-eye'"
            @click="isPassOpen = !isPassOpen"
          />
          <!-- <van-icon name=" /> -->
        </template>
      </my-input>
      <!-- 密码输入框 -->

      <!-- 只有手机号码和密码的格式满足正则要求了才能够登录 -->
      <p class="center">
        <span class="center" @click="login">登陆</span>
      </p>

      <p>忘记密码</p>
      <p @click="$router.push('/register')">还没有注册？ 立即注册</p>
    </div>
  </div>
</template>
<script>
import myInput from "../../components/myInput.vue";
import { reactive, toRefs, ref } from "vue";
import { asyncLogin } from "../../utils/person.js";
import { useRouter } from "vue-router";
export default {
  components: {
    myInput,
  },
  setup(props) {
    const router = useRouter();
    const username = ref("");
    const password = ref("");

    let regMobile = /^1[3,5,6,7,8,9][0-9]{9}$/;
    // 电话号码的正则

    const userTrue = ref("");
    //这个变量如果是error 就代表 用户名不对 如果是success就代表用户名正确
    // 为什么不用布尔值是因为这样可以跟类名一致 初始值为空就一开始没有样式

    const userBlur = () => {
      console.log("用户名失去焦点时候触发");

      // if (regMobile.test(username.value)) {
      //   userTrue.value = "success";
      // } else {
      //   userTrue.value = "error";
      // }
      userTrue.value = regMobile.test(username.value) ? "success" : "error";
    };
    //用户失去焦点的时候调用

    const passTrue = ref("");
    // 密码输否正确
    const isPassOpen = ref(false);
    //这个变量代表密码的 眼睛图标是不是张开

    const passBlur = () => {
      console.log("密码失去焦点时候触发");
      passTrue.value = password.value == "" ? "error" : "success";
    };
    //只要密码不为空就是true 否则为false

    // 失去焦点的时候判断输入的是不是正确 并且给这个输入框绿色或者红色的边框

    const login = () => {
      if (userTrue.value == "success" && passTrue.value) {
        asyncLogin({ mobile: username.value, pwd: password.value }).then(
          (res) => {
            console.log(res);
            if (res.code == 0) {
              localStorage.setItem("token", res.data.token);
              //token是身份的象征 所以在登陆成功的时候把token存到本地存储中
              router.push("/home");
            } else {
              alert(res.msg);
            }
          }
        );
      } else {
        alert("用户名或者密码格式不对不能请求登陆接口");
      }
    };
    //点击登录时候调用登陆接口 把用户名和密码传到后台登录 并且做状态的判断
    return {
      username,
      password,
      userBlur,
      passBlur,
      userTrue,
      passTrue,
      isPassOpen,
      login,
    };
  },
};
</script>
<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
  .inner {
    border: 1px solid #f5f5f5;
    padding: 30px;
    box-sizing: border-box;
    height: 580px;
    p:nth-child(1) {
      color: #666;
      font-size: 22px;
    }
    p:nth-child(2) {
      color: #909090;
      font-size: 15px;
      margin-top: 26px;
    }
    p:nth-child(6) {
      color: #989898;
      font-size: 12px;
      margin-top: 26px;
      text-align: center;
    }
    p:nth-child(7) {
      color: #549ff9;
      font-size: 15px;
      margin-top: 26px;
      text-align: center;
    }

    p:nth-child(5) {
      margin-top: 22px;
      span {
        width: 210px;
        height: 50px;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
      }
    }
  }
}
</style>
